<template>
	<div class="mine">
		<div class="box">
			<div class="hearderBox">
				<div class="hearderBoxIcon" @click="goBack">
					<img src="../../assets/images/fanhuijiantou.png" alt="">
				</div>
				{{title}}
				<div class="vipjilu" @click="getShowLook" v-if="!isShowLook">
					<img src="../../assets/images/chaxun.png" alt="">
				</div>
			</div>
			<div class="proList" v-if="isShowLook">
				<div class="dfafaTimeBox">
					<div class="magBox">
						<div class="input-block"><label for="password">{{$t('indexTitle.title101')}}</label>
							<input type="date" v-model="startTime">
						</div>
					</div>
					<div class="magBox">
						<div class="input-block"><label for="password">{{$t('indexTitle.title102')}}</label>
							<input type="date" v-model="endTime">
						</div>
					</div>
				</div>
				<div class="zhuyiBox">
					<img src="../../assets/images/zhuyi.png" alt="">
					{{$t('indexTitle.title103')}}
				</div>
				<div class="btnssss" @click="mountedfcTow">{{$t('indexTitle.title104')}}</div>
			</div>
			<div class="proList" :class="isShowLook ? 'padtop':''">
				<div class="adsfList">
					<div class="adsfListL">
						{{$t('indexTitle.title115')}}
					</div>
					<div class="adsfListR">
						{{startTime}}~{{endTime}}
					</div>
				</div>
				<div class="adsfList adsfListTow">
					<div class="adsfListL">
						{{$t('indexTitle.title158')}}
					</div>
					<div class="adsfListR">
						{{zong}}
					</div>
				</div>
				<div v-if="list.length > 0">
					<div class="dafadBopx" v-for="(item,index) in list" :key="index">
						<div class="jiaqianBox">
							<div class="row status-row">
								<div>
									<div>{{$t('indexTitle.title159')}} : {{item.created_at}}</div>
									<div class="application-time">{{$t('indexTitle.title160')}} : {{item.confirm_at}}
									</div>
								</div>
								<div>
									<div class="status expired" v-if="item.status == 1">{{$t('indexTitle.title161')}}
									</div>
									<div class="status success" v-if="item.status == 2">{{$t('indexTitle.title162')}}
									</div>
									<div class="status failed" v-if="item.status == 3">{{$t('indexTitle.title163')}}
									</div>
								</div>
							</div>
							<div class="jiaqianBoxItTow" v-if="item.payment_type == 5">{{$t('indexTitle.title76')}}
							</div>
							<div class="jiaqianBoxItTow" v-if="item.payment_type == 4">{{$t('indexTitle.title77')}}
							</div>
							<div class="jiaqianBoxItTow" v-if="item.payment_type == 6">usdt</div>
							<div class="jiaqianBoxItThree">
								<div class="jiaqianBoxItThreeL">
									{{$t('indexTitle.title164')}}
								</div>
								<div class="jiaqianBoxItThreeR">
									{{item.money}}
								</div>
							</div>
						</div>
						<div class="jifenBoxTow" @click="getShowJifen" :class="{jifenBoxThree:isJIfenShow}">
							<div class="beizhuBox">
								<div class="beizhuBoxL">
									{{$t('indexTitle.title165')}}：{{item.payment_desc}}
								</div>
								<div class="beizhuBoxR">
									<img src="../../assets/images/more.png" alt="">
								</div>
							</div>
						</div>
						<div class="card-more-btn">
							<div class="text-overflow">
								<span class="titles">{{$t('indexTitle.title166')}}</span>
								<span>{{item.bill_no}}</span>
							</div>
							<img @click="copyUrl(item.bill_no)" src="../../assets/images/copy.png" alt="" />
						</div>
						<div class="gengduoBox" @click="getShowJifen" :class="{gengduoBoxTow:isJIfenShow}">
							{{$t('indexTitle.title167')}}
						</div>
					</div>
				</div>
				<div class="zanwujiluBox" v-else>
					{{$t('indexTitle.title122')}}
				</div>
			</div>
		</div>
		<div class="jiazaidonghua" v-if="isloadingTowShow">
			<img src="../../assets/img/loading-ani.svg" alt="" />
		</div>
		<!-- <div class="buttons">
			<img src="../../assets/images/xiaoxi.png" alt="" />
		</div> -->
		<loadingFour :msgText="msgTextTow" :isShowCloseBot="isShowCloseBot" v-if="isShowLoadingTeow"
			@closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>

<script>
	import {
		rechargelist,
		drawinglist,
		fslist,
		youhuilist,
		shoudonglist
	} from "../../utils/api.js"
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		components: {
			loadingFour
		},
		data() {
			return {
				title: "",
				isJIfenShow: false,
				isShowLook: true,
				list: [],
				zong: 0,
				startTime: "",
				endTime: "",
				page: 1,
				isloadingTowShow: false,
				msgTextTow: "",
				isShowLoadingTeow: false,
				isShowCloseBot: false,
			}
		},
		created() {},
		mounted() {
			this.title = this.$route.query.title;
			this.page = 1;
			var getTime = new Date().getTime(); //获取到当前时间戳
			var time = new Date(getTime); //创建一个日期对象
			this.nowDate(time);
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			nowDate(time) {
				var year = time.getFullYear(); // 年
				var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
				var date = time.getDate().toString().padStart(2, '0'); // 日
				this.startTime = year + "-" + month + "-" + date;
				this.endTime = year + "-" + month + "-" + date;

			},
			mountedfcTow(){
				this.$router.push({
					path: '/promotion',
					query: {
						title: this.$route.query.title,
						page: this.page,
						startTime: this.startTime,
						endTime: this.endTime,
					}
				})
			},
			getShowJifen() {
				this.isJIfenShow = !this.isJIfenShow;
			},
			goNextPage(page) {
				this.$router.push(page)
			},
			getShowLook() {
				this.isShowLook = true;
			},
			goBack() {
				this.$router.push({
					path: '/promotion',
					query: {
						title: this.$route.query.title,
						page: this.page,
						startTime: this.startTime,
						endTime: this.endTime,
					}
				})
				// this.$router.push({
				// 	path: '/finan-history',
				// })
				// this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.mine {
		height: 90vh;
		overflow-y: auto;
		overflow-x: hidden;
		padding-top: calc(constant(safe-area-inset-top) + 0px);
		padding-top: calc(env(safe-area-inset-top) + 0px);
		padding-bottom: calc(constant(safe-area-inset-bottom) + 85px);
		padding-bottom: calc(env(safe-area-inset-bottom) + 85px);
		box-sizing: border-box;
		position: fixed;
		z-index: 1;
		-webkit-overflow-scrolling: touch;
		width: 100%;
	}

	.box {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		/* min-height: 100vh; */
	}

	.buttons {
		position: fixed;
		bottom: 10%;
		right: 10px;
		background-color: #99D2E3;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.buttons img {
		width: 32px;
		height: 32px;
	}


	.hearderBox {
		width: 100%;
		height: 45px;
		background-color: #fff;
		position: fixed;
		top: 0;
		font-weight: 300;
		line-height: 45px;
		text-align: center;
		font-size: 20px;
		color: #545658;
		box-shadow: inset 0 -1px 0 #ececec;
		left: 0;
		overflow: hidden;
		z-index: 99;
	}

	.hearderBoxIcon {
		width: 50px;
		position: fixed;
		top: 3px;
		left: 0px;
	}

	.hearderBoxIcon img {
		width: 20px;
		height: 20px;
	}

	.proList {
		width: 100%;
		padding: 50px 15px 10px;
	}

	.proList.padtop {
		padding-top: 10px;
	}

	.adsfList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		padding: 0px 15px;
		height: 27px;
		border-bottom: 1px solid #e9e9e9;
	}

	.adsfListTow {
		border-bottom: none;
	}

	.adsfListL {
		color: #939698;
	}

	.adsfListR {
		color: #545658;
		font-weight: 500;
	}

	.dafadBopx {
		width: 100%;
		margin-top: 10px;
	}

	.jiaqianBox {
		width: 100%;
		/* height: 90px; */
		padding: 12px 15px 5px;
		border: 1px solid #ececec;
		background: #fafafc;
		border-radius: 5px 5px 0px 0px;
	}

	.jiaqianBoxIt {
		color: #939698;
		font-size: 12px;
		line-height: 1;
		opacity: 0.8;
		margin-bottom: 8px;
	}

	.jiaqianBoxItTow {
		font-size: 16px;
		font-weight: 500;
		color: #939698;
	}

	.jiaqianBoxItThree {
		margin-top: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.jiaqianBoxItThreeL {
		color: #939698;
		font-size: 12px;
		line-height: 1;
		opacity: 0.8;
		margin-bottom: 8px;
	}

	.jiaqianBoxItThreeR {
		color: #545658;
		font-weight: 500;
		font-size: 20px;
	}

	.vipjilu {
		position: fixed;
		top: 3px;
		right: 10px;
	}

	.vipjilu img {
		width: 25px;
		height: 25px;
	}

	.gengduoBox {
		background-color: #e1e1e1;
		color: #838383;
		cursor: pointer;
		font-size: 14px;
		padding: 8px 15px;
		text-align: center;
		display: none;
		border-radius: 0px 0px 5px 5px;
	}

	.gengduoBoxTow {
		display: block;
	}


	.jifenBoxTow {
		width: 100%;
		height: 60px;
		display: block;
		padding: 7px 10px 10px;
		border: 1px solid #ececec;
		border-top: none;
		background-color: #fafafc;
	}

	.beizhuBox {
		width: 100%;
		height: 42px;
		border: 2px solid #e9e9e9;
		border-radius: 5px;
		display: flex;
		padding: 0px 15px 0px 3px;
		align-items: center;
		justify-content: space-between;
	}

	.beizhuBoxL {
		width: 90%;
		font-size: 12px;
		color: #545658;
		opacity: 0.7;
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.beizhuBoxR {
		width: 10%;
		text-align: center;
	}

	.jifenBoxThree {
		display: none;
	}

	.beizhuBoxR img {
		width: 20px;
		height: 20px;
	}

	.gengduoBoxTow {
		display: block;
	}

	.dfafaTimeBox {
		width: 100%;
		margin: 5px auto 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.magBox {
		width: 49%;
		border-radius: 5px;
		box-sizing: border-box;
		display: flex;
		height: 54px;
		justify-content: space-around;
		padding: 0 10px;
		background-color: #fbfbfb;
		border: 1px solid #e9e9e9;
		color: #777;
		font-weight: 300;
	}

	.input-block {
		box-sizing: border-box;
		position: relative;
		width: 100%;
	}

	.input-block label {
		color: #a0a3a5;
		line-height: 1.29;
		pointer-events: none;
		position: absolute;
		font-size: 10px !important;
		top: 8px !important;
		font-weight: 300;
	}

	.input-block input {
		background-color: transparent;
		color: #545658;
		border: none !important;
		box-sizing: border-box;
		position: absolute;
		width: 100%;
		outline: medium;
		padding: 0;
		font-size: 14px !important;
		font-family: sans-serif;
		font-size: 100%;
		line-height: 1.15;
		margin: 0;
		height: 28px !important;
		box-shadow: none !important;
		top: 24px !important;
	}

	.zhuyiBox img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.zhuyiBox {
		display: flex;
		font-size: 12px;
		margin: 5px auto 10px;
		color: #86898c;
		font-weight: 300;
		width: 95%;
	}

	.btnssss {
		background-color: #7240ff;
		border: none;
		border-radius: 3px;
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		height: 44px;
		width: 100%;
		margin: 20px auto 0;
		text-align: center;
		line-height: 44px;
	}

	.zanwujiluBox {
		width: 100%;
		height: calc(100vh - 238px);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		opacity: .6;
		color: #545658;
		font-weight: 300;
	}

	.row {
		align-items: center;
		color: #939698;
		display: flex;
		font-size: 12px;
		justify-content: space-between;
		line-height: 1;
		margin-bottom: 8px;
	}

	.status-row {
		min-height: 50px;
	}

	.application-time {
		display: flex;
		margin-top: 10px;
		white-space: pre;
	}

	.status {
		align-items: center;
		background-color: #e7e7e7;
		border-radius: 2px;
		color: #939698;
		display: flex;
		font-size: 12px;
		height: 20px;
		justify-content: center;
		line-height: 20px;
		max-width: 150px;
		padding: 0 10px;
		white-space: nowrap;
	}

	.status.failed {
		background: #e94951;
		color: #fff;
	}

	.status.success {
		background: #9ac143;
		color: #fff;
	}

	.status.expired {
		background: #939698;
		color: #fff;
	}

	.card-more-btn {
		background-color: #e1e1e1;
		color: #838383;
		cursor: pointer;
		font-size: 14px;
		padding: 8px 15px;
		align-items: center;
		display: flex;
		justify-content: space-between;
		text-align: initial;
		border-radius: 0px 0px 5px 5px;
	}

	.text-overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 90%;
	}

	.titles {
		margin-right: 10px;
	}

	.card-more-btn img {
		width: 18px;
		height: 18px;
		margin-left: 5px;
	}

	.jiazaidonghua {
		height: 100px;
		width: 100px;
		background-color: #313131;
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
	}

	.jiazaidonghua img {
		height: 45px;
		width: 45px;
	}
</style>